<template>
  <div class="header">
    <div class="top">
      <router-link class="box" to="mymine">
        <div class="iconfont icon-zuojiantou"></div>
        <div class="back">返回</div>
      </router-link>
      <div class="text">我的收藏</div>
    </div>
    <div class="middle">
      <div class="bg">
        <img src="../assets/sread-img/tubiao.png" alt="" />
      </div>
    </div>
    <div class="bottom">
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="没有收藏的商品哦"
      />
      <router-link class="shoucang" to="mymenu">
          去收藏
      </router-link>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.header {
    position: relative;
  .top {
    display: flex;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    .box {
      display: flex;
      .iconfont {
      }
      .back {
      }
    }
    .text {
      margin-left: 100px;
    }
  }
  .middle {
    .bg {
      img {
        width: 100%;
      }
    }
  }
  .bottom {
      border-radius: 20px;
      margin-left: 3px;
      width: 98%;
      position: absolute;
      left: 0;
      top: 200px;
      background-color: rgba(255,255,255,.5);
      .custom-image {
          margin-top: 50px;
      }
      .shoucang {
          margin-left: 150px;
          color: #1989fa;
          font-weight: bold;
      }
  }
}
</style>
<script>
import "@/assets/fonts/iconfont.css";
export default {
  name: "shouchang",
};
</script>